<template>
	<view class="custom-search-section">
		<view class="icon">
			<slot></slot>
		</view>
		<view class="s-input-container">
			<image class="s-icon" src="/static/common/search.png"></image>
			<template v-if="usePage=='index'">
				<view class="s-input like" ref="sinputRef1" @click="toSearch">{{initPlaceholder}}</view>
			</template>
			<template v-else>
				<input type="text" class="s-input" ref="sinputRef2" focus @input="toSearch"
					:placeholder="initPlaceholder" v-model="sText" />
				<image class="input-close" src="/static/common/model/close.png" v-if="!!sText" @click="sText=''">
				</image>
			</template>

		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		onLoad,
		onShow,
		onHide,
		onPageShow,
		onPageHide
	} from "@dcloudio/uni-app";


	const app = getApp({
		allowDefault: true
	}).globalData;


	const sText = defineModel();

	const props = defineProps({
		initPlaceholder: {
			type: String,
			default: "写实风格模板"
		},
		//那个页面使用
		usePage: {
			type: String, //index --首页   |   searchInfo--搜索详情
			default: 'index'
		}
	})


	const emit = defineEmits(['inputChange'])

	function toSearch() {
		switch (props.usePage) {
			case 'index': {
				//首页使用
				uni.navigateTo({
					url: 'searchInfo/index',
					animationType: 'slide-in-right',
					animationDuration: 500
				});
				break
			}
			case 'searchInfo': {
				emit('inputChange')
				break
			}
		}

	}
</script>

<style scoped lang="less">
	.custom-search-section {
		display: flex;
		width: 100%;
		height: 100%;
		align-items: center;

		.icon {
			margin-left: 34rpx;
			width: 20rpx;
			height: 30rpx;
			display: flex;
			justify-content: center;
			align-content: center;

			:deep(image) {
				width: 100%;
				height: 100%;
			}
		}

		.s-input-container {
			flex: 1;
			height: 64rpx;
			margin: 0 32rpx 0 32rpx;

			background: rgba(0, 0, 0, 0.31);
			border-radius: 498rpx 498rpx 498rpx 498rpx;
			position: relative;

			.s-icon {
				position: absolute;
				left: 22rpx;
				top: 20rpx;
				width: 24rpx;
				height: 24rpx;

			}

			.s-input {
				width: 100%;
				height: 100%;
				line-height: 64rpx;
				text-align: left;
				font-weight: 500;
				font-size: 20rpx;
				color: #FFFFFF;
				padding-left: 62rpx;

				&.like {
					line-height: 65rpx;
					color: #909090;
				}
			}

			.input-close {
				position: absolute;
				right: 22rpx;
				top: 20rpx;
				width: 24rpx;
				height: 24rpx;
			}
		}

	}
</style>